<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'
import myselect from '../select.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

</script>

<template>

    <el-form :model="config" label-width="80px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="标题名">
            <el-input type="text" v-model="config.name" />
        </el-form-item>
        <el-form-item label="标题字号">
            <el-input-number type="number" v-model="config.fontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="字颜色">
            <el-color-picker v-model="config.color" />
        </el-form-item>
        <el-form-item label="显示更多">
            <el-switch v-model="config.more" size="large" />
        </el-form-item>
        <el-form-item label="更多字号">
            <el-input-number type="number" v-model="config.moreSize"></el-input-number>
        </el-form-item>
        <el-form-item label="链接地址">
            <!-- <el-input type="text" v-model="config.link" /> -->
            <myselect :config="config.link" size="default" />&nbsp;
            <a @click="config.link = { type: '', link: '', name: '', url: '' }">清空</a>
            <div style="width: 100%">
                {{ config.link.name }}<br>
                {{ config.link.link }}
            </div>
        </el-form-item>
        <!-- <el-form-item label="自定义项">
                <el-input type="text" v-model="config.define" />
            </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>


</template>

<style scoped></style>